<template>
    <div class="container">
       <div class="header"> 
        <van-icon @click="goBack" name="arrow-left" class="header-left" size="30" />
        填写服务订单
    </div>
     <statur-bar item="0"/>
     <van-cell class="cell">
      <template #title>
        <van-image
           :src="createInfo.service.serviceImg"
            width="25"
            height="25"
            />
           <span class="service-name">{{createInfo.service.serviceName}}</span>
            
      </template>
      <template #default>
        <div class="service-text">服务内容</div>
      </template>
     </van-cell>
     <van-cell-group  class="cell">
      <van-cell>
        <template #title>就诊医院</template>
        <template #default>
        <div  @click="showHospital=true">
          {{form.hospital_name ||"请选择就诊医院"}}
          <van-icon name="arrow" /></div>
      </template>
      </van-cell>
      <van-cell>
        <template #title>就诊时间</template>
        <template #default>
        <div  @click="showStartTime=true">
        {{currentDate||"请选择时间"}}
          <van-icon name="arrow" /></div>
      </template>
      </van-cell>
      <van-cell>
    <template #title>陪诊师</template>
    <template #default>
      <div @click="showCompanion = true">
        {{ companionName || "请选陪护师" }}
      </div>
    </template>
  </van-cell>
  <van-cell>
        <template #title>接送地址</template>
        <template #default>
     
          <van-field
          class="text"
          input-align="right"
      v-model="form.receiveAddress"
      placeholder="请填写地址"
    
    />
      </template>
      </van-cell>
      <van-cell>
        <template #title>联系电话</template>
        <template #default>
         <van-field
          class="text"
          input-align="right"
      v-model="form.tel"
      placeholder="填写联系电话"
    
    />   
      </template>
      </van-cell>


     </van-cell-group>
     <van-cell-group  title="服务需求" class="cell">
    <van-field
          class="text"
          style="height:100px"
      v-model="form.demand"
      placeholder="请描述你要就诊的科室"
    
    />   
  </van-cell-group>
  <van-button @click="submit" class="sumbit" type="primary" size="large">提交订单</van-button>
     <!-- 底部弹出 -->
     <van-popup
      v-model:show="showHospital"
      position="bottom"
      :style="{ height: '30%' }"
>
    <van-picker
      
      :columns="showHospitalColumns"
      @confirm="showHospitalConfirm"
      @cancel="showColumns=false"
  
    />
</van-popup>
<van-popup
      v-model:show="showStartTime"
      position="bottom"
      :style="{ height: '30%' }"
>
      <van-date-picker
    
        title="选择日期"
        :min-date="minDate"
       @confirm="showTimeConfirm"
        @cancel="showStartTime=false"
      />
</van-popup>
<van-popup
    v-model:show="showCompanion"
    position="bottom"
    :style="{ height: '30%' }"
  >
    <van-picker
      :columns="companionColumns"
      @confirm="handleCompanionSelect"
      @cancel="showCompanion = false"
    />
  </van-popup>
   <!-- 支付二维码弹窗 -->
  <van-dialog v-model:show="showCode" >
    <van-icon name="cross" class="close" @click="closeCode"/>
    <div>微信支付</div>

<van-image width="150px" height="150px" :src="codeImg"></van-image>
<div>使用本人微信扫描二维码</div>
</van-dialog>
    </div>
  

</template>
<script setup>
import   {useRouter} from  'vue-router'
import StaturBar from '../../components/staturBar.vue'
import { onMounted,getCurrentInstance,reactive,ref,computed } from 'vue';
import { showNotify } from 'vant';
import  Qrcode from 'qrcode'
//获取当前vue实例
const {proxy}=getCurrentInstance()
const createInfo=reactive({
  companion:[],
  hospitals:[],
  service:{}

})
onMounted(async()=>{
 const{data}=await proxy.$api.h5Companion()
 console.log(createInfo)
 Object.assign(createInfo,data.data)
})
const router = useRouter()
  //点击返回上一页
  const goBack = () => {
    router.go(-1)
  }
//form数据
const form=reactive({

})

  //就诊医院
const showHospital= ref (false) 
const  showHospitalColumns=computed (()=>{
  return createInfo.hospitals.map(item=>{
    return {
      text: item.name,
      value: item.id
    }
  })
})
//选择医院
const showHospitalConfirm=(item) => { 
form.hospital_id= item.selectedValues[0]
form.hospital_name= item.selectedOptions[0].text
//关闭弹窗
showHospital.value=false
}

//选择就诊时间
const showStartTime=ref (false)
//最小日期
const minDate = ref(new Date( ))

const currentDate=ref()


const showTimeConfirm=(item)=>{
 const dateStr= item.selectedValues.join('-')
 currentDate.value = dateStr
form.starttime= new Date(dateStr).getTime()
showStartTime.value= false
}
 //选择陪诊师
 // 控制陪诊师选择弹窗的显示与隐藏
const showCompanion = ref(false);

// 陪诊师选项列表
const companionColumns = computed(() => {
  return createInfo.companion.map((item) => {
    return {
      text: item.name,
      value: item.id
    };
  });
});

// 选中的陪诊师名称
const companionName = ref('');

// 处理陪诊师选择的函数
const handleCompanionSelect = (item) => {
  // 获取选中的陪诊师ID
  const selectedCompanionId = item.selectedValues[0];
  // 将选中的陪诊师ID保存到表单中
  form.companion_id = selectedCompanionId;
  // 将选中的陪诊师名称显示出来
  companionName.value = item.selectedOptions[0].text;
  // 关闭弹窗
  showCompanion.value = false;
};
//支付弹窗
const showCode=ref(false);
const codeImg=ref(false);
const  closeCode=()=>{
  showCode.value=false;

router.push('/order');
}

//提交表单
const submit=async()=>{
const parmas=[
  'hospital_id',
  'hospital_name',
 'starttime',
  'demand',
  'companion_id',
 'receiveAddress',
  'tel',
]
for(const i of parmas){
  if(!form[i]){
   showNotify({ message: '请输入必要信息' });

    return
  } 
}
const{data:orderRes}=await proxy.$api.createOrder(form)
Qrcode.toDataURL(orderRes.data.wx_code).then((url)=>{
showCode.value = true;
  codeImg.value=url;
})

}

</script>



<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
	display: flex;
	align-items: center;
  }
  .server-name {
	  margin-left: 10px;
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
